<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <body>
    <div id="root"></div>
    <script type="text/babel">
          // 这几种事件的写法都是可以在事件处理函数中拿到this
     class Hello extends React.Component{
      state={
        name:'jindu',
        age:18,
        flag:true
      }
      updateInfo(){
        this.setState({
          age:this.state.age+1
        })
      }
      updateName(){
        console.log(this)
        this.setState({
          name:'JINDU'
        })
      }
      updateFlag = ()=>{
        console.log(this)
        this.setState({
          flag:!this.state.flag
        })
      }
      render(){
        return <div>
          <p>这是一个有状态的组件</p>
          <p>姓名：{this.state.name}</p>
          <p>年龄：{this.state.age}</p>
          <p>领域：前端</p>
          <button onClick={this.updateInfo.bind(this)}>更新年龄</button>
          <button onClick={()=>this.updateName()}>更新名字</button>
          <button onClick={this.updateFlag}>{this.state.flag?'YES':'NO'}</button>

          </div>
      }      
    }
    ReactDOM.render(<Hello />, document.getElementById('root'))
    </script>
  </body>
</html>
